<template>
  <el-form :model="TenantData" ref="queryTenant" class="demo-form-inline" size="mini">
    <el-row :gutter=20>
      <el-col :span=4>
        <el-form-item label="租户名称">
          <el-input placeholder="请输入" v-model="TenantData.name" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item label="租户缩写">
          <el-input placeholder="请输入" v-model="TenantData.shortName" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item label="所属公司">
          <el-input placeholder="请输入" v-model="TenantData.company" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item label="公司缩写">
          <el-input placeholder="请输入" v-model="TenantData.companyShortName" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item>
          <el-button round type="primary" @click="getTenantList">查询</el-button>
          <el-button round @click="resetForm('queryTenant')">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-row>
    <el-button type="primary" round @click="showTenantDialog()" size="medium">添加租户</el-button>
  </el-row>
  <TenantDialog ref="tenantDialog"/>
  <UserRelationDialog ref="relationDialog"/>

  <el-table :data="tenantList" :key="tenantKey" style="width: 100%">
    <el-table-column fixed label="租户名称" prop="name" width="80">
      <template #default="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="租户缩写" prop="shortName" width="120">
      <template #default="scope">
        {{ scope.row.shortName }}
      </template>
    </el-table-column>
    <el-table-column label="所属公司" prop="company" width="200">
      <template #default="scope">
        {{ scope.row.company }}
      </template>
    </el-table-column>
    <el-table-column label="公司简称" width="120" prop="companyShortName">
      <template #default="scope">
        {{ scope.row.companyShortName }}
      </template>
    </el-table-column>
    <el-table-column label="主要联系人" width="100" prop="contactAName">
      <template #default="scope">
        {{ scope.row.contactAName }}
      </template>
    </el-table-column>
    <el-table-column prop="contactAMobile" label="主要联系人电话" width="120">
      <template #default="scope">
        {{ scope.row.contactAMobile }}
      </template>
    </el-table-column>
    <el-table-column label="备用联络人" prop="contactBName" width="100">
      <template #default="scope">
        {{ scope.row.contactBName }}
      </template>
    </el-table-column>
    <el-table-column label="备用联络方式" width="120" prop="contactBMobile">
      <template #default="scope">
        {{ scope.row.contactBMobile }}
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="description" width="150">
      <template #default="scope">
        {{ scope.row.description }}
      </template>
    </el-table-column>
    <el-table-column label="创建人" width="120" prop="createdBy">
      <template #default="scope">
        {{ scope.row.createdBy }}
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="200" prop="createdTIme">
      <template #default="scope">
        {{ scope.row.createdTime }}
      </template>
    </el-table-column>
    <el-table-column label="更新人" width="120" prop="updatedBy">
      <template #default="scope">
        {{ scope.row.updatedBy }}
      </template>
    </el-table-column>
    <el-table-column label="更新时间" width="200" prop="updatedTime">
      <template #default="scope">
        {{ scope.row.updatedTime }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="scope">
        <el-button-group>
          <el-button type="primary" icon="el-icon-edit" @click="showTenantDialog(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-user" @click="showRelationDialog(scope.row)"></el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      :hide-on-single-page="pageData.hidden"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="pageData.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageData.size"
      :total="pageData.total"
      layout="total, sizes, prev, pager, next, jumper"
  >

  </el-pagination>
</template>
<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import TenantDialog from "../components/TenantDialog.vue";
import UserRelationDialog from "../components/UserRelationDialog.vue";

export default {
  components: {
    TenantDialog, UserRelationDialog
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const TenantData = reactive({
      name: ref(),
      shortName: ref(),
      company: ref(),
      companyShortName: ref()
    })

    const pageData = reactive({
      page: ref(1),
      size: ref(10),
      total: ref(0),
      hidden: ref(true)
    })

    let tenantList = []

    const tenantKey = ref()
    const getTenantList = () => {
      proxy.$service.getTenantList({
        name: proxy.TenantData.name,
        shortName: proxy.TenantData.shortName,
        company: proxy.TenantData.company,
        companyShortName: proxy.TenantData.companyShortName,
        current: proxy.pageData.page,
        size: proxy.pageData.size,
      }).then(result => {
        let json = result.res.data
        proxy.pageData.total = json.total
        proxy.tenantList = json.records
        proxy.tenantKey = Math.random()
      })
    }


    onMounted(() => {
      getTenantList();
    })

    const resetForm = (formName) => {
      console.log("tenantmanager", formName)
      proxy.$refs[formName].resetFields()
    }

    const showTenantDialog = (params) => {
      proxy.$refs.tenantDialog.setTenantData(params)
    }

    const showRelationDialog = (param) => {
      proxy.$refs.relationDialog.setDialogType(reactive({
        id:param.id,
        type:1
      }))
    }

    const sizeChange = (val) => {
      {
        proxy.pageData.size = val
        getTenantList()
      }
    }
    const currentChange = (val) => {
      proxy.pageData.page = val;
      getTenantList()
    }

    return {
      TenantData,
      getTenantList,
      resetForm,
      showTenantDialog,
      pageData,
      sizeChange,
      currentChange,
      tenantList,
      tenantKey,
      showRelationDialog
    }
  }
}
</script>

<style>

</style>